<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.0.1/css/ol.css" integrity="sha384-HXAuTFMQWNDZ/4IG/MfVsEkypK3j3m+YAkkiTtRL8t9eQ7r/8SVUUQBndfB07tc3" crossorigin="anonymous" type="text/css">
  <link rel="stylesheet" href="../olcs.css" type="text/css">
  <style>
    #map { height: 300px; width: 500px }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.0.1/build/ol.js" integrity="sha384-UCAz1oyIBXM+bvGDRT5xTIbyMXZH6HZPNcnmcx3G4t7GK8oH7NyHUazlQiihaPOl" crossorigin="anonymous"></script>
  <script src="../olcesium.js"></script>
  <script src="https://cesiumjs.org/releases/1.62/Build/CesiumUnminified/Cesium.js" integrity="sha384-xdu1zCj18Cxd087NG9y3HKgg8M4sni94AL0zjbuV2Hpi6E955z4Wq24aKNr4fBcJ" crossorigin="anonymous"></script>
</head>
<body>
  <p>Old-fashioned example</p>
  <input id="enable" type="button" value="Enable/disable" />
  <div id="map"></div>
</body>
<script>
  var ol2d = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: new ol.View({
      center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3
    })
  });
  
  var ol3d = new olcs.OLCesium({
    map: ol2d,
  });
  ol3d.setEnabled(true);
  
  var setEnabled = function() {ol3d.setEnabled(!ol3d.getEnabled())};
  document.getElementById('enable').addEventListener('click', setEnabled);
</script>
</html>
